<template>
  <div
    class="product-register-view-container"
    :class="{
      'isLayout1': baseLayout === 1,
      [`is-curr-tab-${tabPosition}`]: true
    }"
    v-loading="loading">

    <!-- start 顶部工具栏 -->
    <!-- <div class="product-register-toolbar common-detail-header">
      <div class="product-register-toolbar-left" v-if="allowBack || !isDelete">
        <el-button type="plain-third" @click="goBack" v-if="allowBack"><i class="iconfont icon-arrow-left"></i> 返回</el-button>
        <template v-if="!isDelete">
          <el-button type="plain-third" @click="goEdit" v-if="allowEdit"><i class="iconfont icon-edit-square"></i> 编辑</el-button>
          <el-button type="plain-third" @click="deleteproductRegister" v-if="allowDelete"><i class="iconfont icon-delete"></i> 删除</el-button>
        </template>
      </div>
    </div> -->
    <div class="common-detail-header">
      <div class="header-btns">
        <div class="flex-x">
          <div v-if="!isDelete" class="flex-1 header-left-buttons">
            <el-button
              type="plain-third"
              @click="goEdit"
              v-track="getBtnsTrackData('TO_EDIT')"
              v-if="allowEdit">
              <i class="iconfont icon-edit-square"></i>{{$t('common.base.edit')}}
            </el-button>
            <el-button
              type="plain-third"
              @click="deleteproductRegister"
              v-track="getBtnsTrackData('DELETE')"
              v-if="allowDelete">
              <i class="iconfont icon-delete"></i>{{$t('common.base.delete')}}
            </el-button>
          </div>
          <div class="flex-x header-right-buttons" v-if="!isDelete && (productRegister.registerStatus === 1 || productRegister.showApproveBtn)">
            <template>
              <el-button
                v-if="productRegister.showApproveBtn"
                class="mar-l-12"
                type="primary"
                v-track="getBtnsTrackData('AUDIT')"
                @click="approve()">
                {{$t('common.base.approve')}}
              </el-button>
              <el-button
                v-if="productRegister.registerStatus === 1"
                :loading="saveToData.customer.saveLoading"
                class="mar-l-12 iconfont icon-add2"
                type="primary"
                v-track="getBtnsTrackData('SAVE_TO_CUSTOMER')"
                @click="saveTo('customer', productRegisterId)">
                {{$t('common.pageTitle.pageCustomerRegisterCreate')}}
              </el-button>
              <el-button
                v-if="productRegister.registerStatus === 1"
                :loading="saveToData.product.saveLoading"
                class="mar-l-12 iconfont icon-add2"
                type="primary"
                v-track="getBtnsTrackData('SAVE_TO_PRODUCT')"
                @click="saveTo('product', productRegisterId)">
                {{$t('common.pageTitle.pageCustomerProductRegisterCreate')}}
              </el-button>
            </template>
          </div>
        </div>
      </div>
      <div class="header-data"></div>
    </div>
    <!-- end 顶部工具栏 -->

    <!--  顶部 E -->
    <BaseTileLayoutTabBar
      :bar-list="allTabBarList"
      :now-item="leftActiveTab"
      @changeItem="tabBarChangeItem"
      @openLayoutModal="openBaseLayoutModal"
      v-if="baseLayout == 1"
    ></BaseTileLayoutTabBar>

    <!-- start content -->
    <base-collapse
      class="task-detail-main-content register-detail-main-content detail-main-content"
      :show-collapse="true"
      :direction.sync="collapseDirection"
      :hide-part-collapse="hidePartCollapse">
      <template slot="left">
        <div
          class="task-detail-main-content-left detail-main-content-left" v-show="collapseDirection !== 'left'">
          <BaseTileLayoutTabBar
            :bar-list="leftTabBarList"
            :now-item="leftActiveTab"
            @openLayoutModal="openBaseLayoutModal"
            v-if="baseLayout == 2"
          ></BaseTileLayoutTabBar>
          <div class="base-detail-layout-left-content" :class="formCellCount > 1 ? 'bbx-normal-form-view-cell' : ''" id="product-product-detail-1">
            <div v-if="leftActiveTab == 'product-register-view'">
              <!-- <el-tabs
            v-model="leftActiveTab">
            <el-tab-pane
              :label="$t('common.pageTitle.pageProductRegisterDetail')"
              name="product-register-view"> -->
              <div class="detail-main-content-left-head" v-if="isDelete">
                <div
                  class="head-label label-delete"
                  v-if="isDelete">
                  {{$t('common.base.deleted')}}
                </div>
              </div>
              <form-view
                :fields="fields"
                :value="detailData"
                :form-cell-count="formCellCount"
                class="bbx-cell-form-view task-tab-container task-view-containner tab-container register-tab-container">
                <div slot="name"></div>

                <template
                  slot="registerStatusStr"
                  slot-scope="{ value }">
                  <div class="bbx-form-cell-item">
                    <div
                      class="form-view-row bbx-form-cell-item">
                      <label>{{$t('common.label.status')}}</label>
                      <div
                        class="form-view-row-content status-show table-blacklist"
                        :class="{
                          'is-pass': detailData.registerStatus === 1,
                          'on-audit': detailData.registerStatus === 0,
                          'is-reject': detailData.registerStatus === 2
                        }">
                        <span>{{ stateSwitch(detailData.registerStatus) }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </form-view>
            </div>
          </div>
          <!-- </el-tab-pane>
          </el-tabs> -->
        </div>
        <div class="collapse-left" v-show="collapseDirection === 'left'">
          {{$t('common.pageTitle.pageProductRegisterDetail')}}
        </div>
      </template>
      <template slot="right">
        <div
          class="task-detail-main-content-right detail-main-content-right"
          v-show="collapseDirection !== 'right' && productRegister.id">
          <el-tabs
            class="content-right-tabs"
            @tab-click="rightActiveTabClick"
            v-model="rightActiveTab">
            <template v-for="tab in rightTabBarList">
              <el-tab-pane
                :key="tab.tabName"
                :label="tab.tabLabel"
                :name="tab.tabName">
                <component
                  v-if="tab.tabShow && tab.tabName === 'record-tab'"
                  :is="tab.component"
                  :id="productRegisterId"
                  :share-data="propsForSubComponents" 
                  @changeRecordCount="recordCountChange">
                </component>
              </el-tab-pane>
            </template>
          </el-tabs>
        </div>
        <div class="collapse-right" v-show="collapseDirection === 'right' && rightTabBarList.length">
          {{ rightTabBarList[0].tabLabel }}
        </div>
      </template>
    </base-collapse>
    <!-- <div class="main-content" v-loading="loading">
    </div> -->
    <!-- end content -->

    <saveToCustomer
      v-if="saveToData.customer.visibleProp"
      :id="saveToData.id"
      :total="saveToData.customer.saveToTotal"
      :visible-prop="saveToData.customer.visibleProp"
      @changeVisibleProp="e => saveToData.customer.visibleProp = e"
      @confirm="saveToC"
    />
    <saveToProduct
      v-if="saveToData.product.visibleProp"
      :id="saveToData.id"
      :total="saveToData.product.saveToTotal"
      :visible-prop="saveToData.product.visibleProp"
      @changeVisibleProp="e => saveToData.product.visibleProp = e"
      @confirm="saveToP"
    />
    <approve-dialog
      :approveLoading="approveLoading"
      @approveCheck="approveCheck"
      :approve-data="approveData"
      ref="approveDialog" />

    <!-- 通栏设置 -->
    <biz-layout-modal
      ref="bizLayoutModal"
      :biz-layout-type="baseLayout"
      :columns="formCellCount"
      @changeLayout="changeTaskDetailLayout">
    </biz-layout-modal>
  </div>
</template>

<script>
import url from 'url';

import AuthUtil from '@src/util/auth';
import platform from '@src/platform';

import { getApprove } from "@src/api/Repository";

import {
  getRegisterFields,
  getRegisterDetail,
  registerDelete,
  registerAudit
} from "@src/api/productRegisterApi";

import productRegisterInfoRecord from './component/productRegisterInfoRecord.vue';
import ApproveDialog from "./component/ApproveDialog.vue";
import BaseTileLayoutTabBar from '@src/component/common/BaseTabBar/BaseTileLayoutTabBar.vue'
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts';
import mixinForSaveTo from '../utils/mixinForSaveTo' // 保存至xxx按钮相关

import { getFieldValue2string } from '@service/TaskService.ts'

import { formatDate, useStateSystemViewLayout } from 'pub-bbx-utils';
const { getSystemViewLayout } = useStateSystemViewLayout()
import { RESOURCE_PREFIX } from '@src/util/linkSwitch';
import { BaseTabBarUsualEnum, StorageHttpParamsForTerminalType, StorageHttpParamsForModuleType } from '@src/component/common/BaseTabBar/enum'

export default {
  name: 'product-register-view',
  mixins: [ThemeMixin, mixinForSaveTo],
  props: {
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const defuleRightTab = {
      title: this.$t('common.base.dynamicInfo'),
      tabName: 'record-tab',
      tabLabel: `${this.$t('common.base.dynamicInfo')}(${this.recordCount || 0})`,
      component: productRegisterInfoRecord.name,
      isSystem: 1,
      tabShow: true,
    }
    return {
      // currentTabRight: 'record-tab', // 当前的tab
      loading: false, // 加载状态
      // leftActiveTab: 'product-register-view',
      productRegister: {
        id: '',
        attribute: {}
      }, // 产品注册信息数据
      productCount: 0,
      recordCount: 0,
      showWholeName: -1, // -1 代表不显示展开icon 0 代表收起 1 代表展开
      // tabs: [defuleRightTab],
      fieldsInfo: [],
      
      loginUser: {},

      currId: '',
      defaultField: [
        {
          displayName: this.$t('common.base.dataSources'),
          fieldName: 'dataSourceStr',
          formType: 'select',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.status'),
          fieldName: 'registerStatusStr',
          formType: 'select',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.createUser'),
          fieldName: 'createUname',
          formType: 'text',
          isSystem: 1,
          tableName: 'productRegister'
        }, 
        {
          displayName: this.$t('common.label.createTime'),
          fieldName: 'createTime',
          formType: 'text',
          isSystem: 1,
          tableName: 'productRegister'
        },
        {
          displayName: this.$t('common.label.updateTime'),
          fieldName: 'updateTime',
          formType: 'datetime',
          isSystem: 1,
          tableName: 'productRegister'
        }
      ],

      approveLoading: false,
      approveData: {},
      collapseDirection: '',

      baseLayout: 2, // 布局方式 1:通栏 2:左右
      formCellCount: 1,
      leftActiveTab: 'product-register-view',
      leftActiveTabItem: {},
      rightActiveTab: 'record-tab',
      rightActiveTabItem: {},
      tabPosition: 'left', // 记录tab位置  left|right
      leftTabBarList : [{
        tabName: 'product-register-view',
        tabLabel: this.$t('common.pageTitle.pageProductRegisterDetail'),
        tabShow: true,
        position: 'left'
      }],
      rightTabBarList : [defuleRightTab]
    }
  },
  computed: {
    // 是否显示返回按钮
    allowBack(){
      let allow = true;

      // 如果带入noHistory参数，则不显示
      let viewUrl = url.parse(window.location.href, true);
      if(viewUrl.query.noHistory) return false;

      // 验证路径
      let path = window.location.pathname;
      if(path.indexOf(RESOURCE_PREFIX) > -1) path = path.replace(RESOURCE_PREFIX, '')
      let disablePathReg = [/^\/product\/detail\/\S+$/];
      if(disablePathReg.some(reg => reg.test(path))) return false;

      return allow;
    },
    // 是否允许删除产品注册信息
    allowDelete() {
      return this.permission.PRODUCT_REGISTER_DELETE;
    },
    /** 
     * 满足以下条件允许编辑产品注册信息
     * 1. 产品注册信息没有被删除
     * 2. 有编辑权限
     */
    allowEdit() {
      return (!this.isDelete && this.permission.PRODUCT_REGISTER_EDIT);
    },
    // 字段列表
    fields() {
      let fields = (this.fieldsInfo || []).sort((a, b) => a.orderId - b.orderId).filter(field => {
        return field.fieldName !== 'customer' && field.fieldName !== 'qualityInfo' 
      });

      let allFields = [
        ...fields,
        ...this.defaultField
      ]
      return allFields;
    },

    detailData() {
      let relationInfo = {
        attribute: {}
      }
      let dataClone = {
        ...this.productRegister,
        ...(this.productRegister.attribute || {})
      }
      this.fields.forEach(field => {
        if (field.formType !== 'relationProduct') return
        let fieldName = field.fieldName
        let relationFieldName = field.setting?.fieldName
        let relationFormType = field.setting?.formType

        let relationInfoObj = relationFieldName.startsWith('field_') ? relationInfo.attribute : relationInfo
        // 原数据
        let objData = relationFieldName.startsWith('field_') ? (dataClone.attribute || {})[fieldName] : dataClone[fieldName]

        relationInfoObj[relationFieldName] = objData
        let dataCloneObj = fieldName.startsWith('field_') ? dataClone.attribute : dataClone
        // 字符串数据
        let strData = ''
        try {
          strData = getFieldValue2string(relationInfo, relationFieldName, relationFormType, [{
            fieldName: relationFieldName,
            formType: relationFormType,
            setting: field.setting
          }], false)
        } catch(err) {
          console.log(err)
        }

        dataCloneObj[fieldName] = strData
      })
      return dataClone
    },
    /** 
     * 产品注册信息是否被删除
     * 在产品注册信息删除时不允许做任何操作，只能查询 
     * 所有操作的权限应该以此为基础
     */
    isDelete(){
      return this.productRegister.deleted === 1;
    },
    // 当前用户的权限
    permission() {
      return this.initData?.loginUser?.authorities || {};
    },
    /** 子组件所需的数据 */
    propsForSubComponents() {
      return {
        allowEdit: this.allowEdit,
        isDelete: this.isDelete,
        loginUser: this.initData.loginUser,
        productRegister: this.productRegister,
        productCount: this.productCount || 0,
      };
    },
    productRegisterId() {
      let href = window.location.pathname;
      let path = '/product/register/detail/';
      let index = 0;

      if(href.indexOf(path) >= 0)  {
        index = href.indexOf(path);
        return href.substr(index + path.length);
      }
      return '';
    },
    hidePartCollapse() {
      if(this.baseLayout === 1) {
        return this.tabPosition === 'left' ? 'right' : 'left';
      }
      return '';
    },
    allTabBarList() {
      return [...this.leftTabBarList, ...this.rightTabBarList];
    }
  },
  async mounted() {
    this.loading = true;

    this.productCount = (this.initData && this.initData.productCount) || 0;
    this.loginUser = (this.initData && this.initData.loginUser) || {};
    
    this.getProductRegisterFieldsReq();
    this.fetchproductRegister();
    
    try {
      const count = await getSystemViewLayout()
      this.baseLayout = count?.baseLayout || 2
      this.formCellCount = count?.formCellCount || 1
    } catch (error) {
      console.warn(error, 'error try catch initBanner');
    }
  },
  methods: {
    approve() {
      this.$refs.approveDialog.open();
    },
    async getApproveDetail() {
      try {
        let params = {
          objId: this.productRegisterId,
        };
        let res = await getApprove(params);

        if (res.success) {
          this.approveData = res.result;
          this.approveData.createTime = formatDate(this.approveData.createTime)
          // this.approveData.approvers.forEach((item) => {
          //   if (item.userId == this.initData.userInfo.userId)
          //     this.showDetailApprove = true;
          // });
          this.approveData.isList = this.isList;
          // if (this.detail.originalId) {
          //   this.approveData.wikiId = this.detail.originalId;
          // }
        } else {
          this.$platform.notification({
            title: res.message,
            type: "error",
          });
        }
      } catch (err) {
        console.error(err);
      }
    },
    approveCheck({approveRemark, state}) {
      this.approveLoading = true;

      registerAudit({
        id: this.productRegisterId,
        reason: approveRemark,
        registerStatus: state ? 1 : 2
      })
        .then(res => {
          if (!res.succ) {
            this.approveLoading = false;

            this.$platform.notification({
              title: res.message,
              type: 'error',
            });
            return
          }
          this.$refs.approveDialog.close();

          this.$platform.notification({
            title: this.$t('common.base.approveSuccess'),
            type: 'success',
          });
          let fromId = window.frameElement.getAttribute('fromid');
          this.$platform.refreshTab(fromId);

          location.reload()
        })
        .catch(e => {
          console.error('e', e)
          this.$platform.notification({
            title: this.$t('common.base.appreoveFail'),
            message: res.message || '',
            type: 'error',
          });
          this.approveLoading = false;
        });
    },
    // 删除产品注册信息
    async deleteproductRegister() {
      const confirm = await platform.confirm(this.$t('product.register.confirmDeleteRegister'));
      if(!confirm) return

      try {
        this.loading = true;
        let result = await registerDelete({
          ids: this.productRegisterId
        });
        const isSucc = (result.status == 0);

        this.$platform.notification({
          title: this.$t('product.register.deleteRegisterStatus', {status: isSucc ? this.$t('common.base.success') : this.$t('common.base.fail')}),
          message: !isSucc && result.message,
          type: isSucc ? 'success' : 'error',
        });

        if(isSucc) {
          const id = window.frameElement.dataset.id;
          const fromId = window.frameElement.getAttribute('fromid');
          this.$platform.closeTab(id);
          this.$platform.refreshTab(fromId);
        }
        this.loading = false;

      } catch(err) {
        console.log(`productDelete err ${err}`)
      }
    },
    getDataSourceStr(dataSource){
      let str = this.$t('common.fields.customerRegisteredSource.options.all')
      if(dataSource == 1){
        str = this.$t('common.fields.customerRegisteredSource.options.companyCreate')
      }else if (dataSource == 2){
        str = this.$t('common.fields.customerRegisteredSource.options.userRegister')
      }
      return str;
    },
    
    // 获取产品注册信息数据
    fetchproductRegister() {
      const id = this.productRegisterId;
      getRegisterDetail({id}).then(result => {
        // (result.data || {}).attribute = JSON.parse((result.data || {}).attribute) || {}
        this.productRegister = result.data || {};

        const { dataSource } = this.productRegister
        this.productRegister.dataSourceStr = this.getDataSourceStr(dataSource)
        this.loading = false;
        if(this.productRegister.showApproveBtn) {
          this.getApproveDetail();
        }
      })
        .catch(err => console.error(err))
    },
    goBack() {
      parent.frameHistoryBack(window);
    },
    // 跳转编辑
    goEdit() {
      let currTabId = window.frameElement.dataset.id;
      // 跳转之前 修改tab标题
      this.$platform.setTabTitle({
        id: currTabId,
        title: this.$t('product.register.editRegister'),
      })
      window.location.href = `${this.$resourcePrefix}/product/register/edit/${this.productRegisterId}`;
    },
    // 信息动态数量变化
    recordCountChange(count) {
      this.recordCount = count;
      let tab = this.rightTabBarList.find(v => v.tabName === 'record-tab')
      tab && this.$set(tab, 'tabLabel', `${this.$t('common.base.dynamicInfo')}(${this.recordCount || 0})`)
    },
    //获取产品表单属性列表
    getProductRegisterFieldsReq() {
      getRegisterFields().then((res)=>{
        const { status, data, message } = res;
        if( status == 0 ){
          this.fieldsInfo = data;
        }
      }).catch(error=>{});
    },
    getBtnsTrackData(id, data) {
			return this.$track.formatParams(id, data, 'DETAIL_BTNS_GROUP')
		},
    rightActiveTabClick(tab) {
      this.tabBarChangeItem(tab)
      this.$track.clickStat(this.$track.formatParams('DETAIL_ADD_ONS_TABS', title))
    },
    tabBarChangeItem (item) {
      let { TabBarListItemKey:tabName } = BaseTabBarUsualEnum;
      let { position } = item
      this.tabPosition = position
      // 通栏导航和左侧导航共用leftActiveTab数据
      if (this.baseLayout === 1 || position == 'left') {
        this.leftActiveTab = item[tabName];
        this.leftActiveTabItem = item
      }
      // 右侧导航
      if (position == 'right') {
        this.rightActiveTab = item[tabName];
        this.rightActiveTabItem = item
      }
    },
    stateSwitch(state) {
      let val = this.$t('common.base.all')
      switch(state){
        case 0: val = this.$t('common.base.usualStatus.toBeReviewed');break;
        case 1: val = this.$t('common.base.usualStatus.passed');break;
        case 2: val = this.$t('common.base.usualStatus.rejected');break;
        default:break;
      }
      return val
    },
    openBaseLayoutModal() {
      this.$refs.bizLayoutModal?.open()
    },
    changeTaskDetailLayout(type, columns) {
      this.leftActiveTab = this.leftTabBarList[0].tabName
      this.leftActiveTabItem = this.leftTabBarList[0] 
      this.baseLayout = type
      this.tabPosition = 'left'
      if (type === 2) {
        this.rightActiveTab = this.rightTabBarList[0].tabName
        this.rightActiveTabItem = this.rightTabBarList[0]
      }
      this.formCellCount = columns * 1
    }
  },
  components: {
    [productRegisterInfoRecord.name]: productRegisterInfoRecord,
    [ApproveDialog.name]: ApproveDialog,
    BaseTileLayoutTabBar
  }
}
</script>

<style lang="scss">

  body {
    margin: 12px;
    min-width: 1100px;
    overflow-x: auto;
  }

  .product-register-view-container {
    height: 100%;
    // background: #fff;
    border-radius: 3px;
    // box-shadow: 0 1px 4px rgba(216,216,216, .65);

    display: flex;
    flex-flow: column nowrap;
  }

  .product-register-tool-bar {
    border-bottom: 1px solid #f2f2f2;
    color: $text-color-regular;

    display: flex;
    justify-content: space-between;
    
    font-size: 14px;

    .btn-text {
      padding: 5px 12px;
      .iconfont{
        font-size: 14px;
      }
    }
  }

  .common-detail-header {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  }

  .main-content {
    border-radius: 4px;
    display: flex;
    flex-flow: row nowrap;
    flex: 1;

    position: relative;
  }

  .product-register-detail {
    background: #fff;
    display: flex;
    flex: 5;
    flex-flow: column nowrap;

    height: 100%;
    min-width: 420px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

    .form-view{
      border-right: 1px solid #f2f2f2;
      flex: 1;
      padding-top: 5px;
      overflow-y: auto;
    }
  }

  .product-register-name{
    @include backgroundColorPrimaryLight9();
    color: $text-color-primary;

    padding: 13px 20px;
    min-height: 50px;
    margin: 0;

    position: relative;

    font-size: 16px;
    font-weight: 500;

    @include text-ellipsis();

    span{
      white-space: nowrap;
      vertical-align: middle;
    }

    .iconfont {
      position: absolute;
      right: 5px;
      bottom: 15px;

      @include fontColor();

      font-size: 12px;

      &:hover {
        cursor: pointer;
      }
    }

    &.product-register-name-expand{
      span{
        white-space: normal;
      }

      .iconfont{
        transform: rotateZ(-180deg);
      }
    }

    .product-register-name-delete,
    .product-register-name-disable{
      border-radius: 4px;
      color: #fff;

      display: inline-block;
      height: 18px;
      padding: 0 5px;

      font-size: 12px;
      line-height: 18px;
      font-weight: 400;

      vertical-align: middle;
      cursor: default;
    }

    .product-register-name-delete{
      background-color: $color-danger;
    }
    .product-register-name-disable{
      background-color: #ffc107;
    }
  }

  .theme-default .product-register-name{
    background-color: #FAFAFA;
  }

  // .product-register-relation {
  //   background: #fff;
  //   margin-left: 12px;
  //   background: #fff;
  //   border-radius: 4px;
  //   overflow: hidden;
  //   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

  //   height: auto;
  //   min-width: 500px;

  //   flex: 5;
  // }

  // .product-register-relation-content {
  //   height: calc(100% - 50px);
  //   overflow: auto;
  // }

  .action-btn {
    .el-dropdown-btn {
      @include backgroundColorPrimaryLight9();
      border-radius: 2px;
      color: $text-color-primary;

      display: inline-block;
      padding: 0 15px;
      margin-left: 10px;

      line-height: 34px;
      .iconfont {
        font-size: 12px;
        line-height: 12px;

        margin-right: 3px;
      }

      &:hover {
        @include backgroundColor();
        color: #fff;
        cursor: pointer;
      }
    }

    .base-button {
      margin-left: 10px;
    }
  }
</style>

<style lang="scss" scoped>
  .header-right-buttons {
    ::v-deep .el-button {
      font-size: 14px;
    }
  }
</style>

<style lang="scss">
html, body {
  height: 100%;
}

.register-detail-main-content {
  flex: 1;

  &-left,
  &-right {
    height: 100%;
    overflow: hidden;
  }

  .collapse-left,
  .collapse-right {
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    color: $text-color-regular;
    border-bottom: 2px solid $color-border-l2;
  }

  // tabs标签页
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    &__header {
      margin: 0;

      .el-tabs__item {
        padding: 0 24px !important;
        color: $text-color-regular;
        font-weight: normal;
  
        &.is-active {
          @include fontColor();
        }
      }
    }

    &__content {
      flex: 1;
      overflow: auto;

      .el-tab-pane {
        height: 100%;
      }
    }
  }
}
</style>
<style lang="scss">
  @import "@src/assets/scss/common-detail.scss";
.detail-main-content {
  height: 100%;
}
</style>

<style lang="scss" scoped>
  .register-tab-container {
    position: relative;
    background-color: #fff;
  }
  .register-detail-main-content {
    .register-tab-container {
      padding-top: 8px;
    }
  }

  .status-show {
    height: 22px;
    border-radius: 11px;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    color: #FFFFFF;
    flex: 0 1 auto;
    line-height: 22px;
    padding: 0 10px;

    &.is-pass {
      background: #52C41A;
    }
    &.on-audit {
      background: #FFA726;
    }
    &.is-reject {
      background: #FF4D4F;
    }
  }
  .collapse-left,
  .collapse-right {
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
    color: $text-color-regular;
    border-bottom: 2px solid $color-border-l2;
  }

  .base-detail-layout-left-content {
    overflow: auto;
    height: calc(100% - 42px);
  }

  .isLayout1 {
    ::v-deep .resize-bar {
      display: none;
    }
    ::v-deep .base-collapse-btn {
      display: none;
    }
    &.is-curr-tab-left ::v-deep .base-collapse-right {
      display: none;
    }
    &.is-curr-tab-right ::v-deep .base-collapse-left {
      display: none;
    }
    ::v-deep .el-tabs__header {
      display: none;
    }
  }
</style>